import React, {Component,useEffect,useState} from 'react'
import { CSSTransition } from 'react-transition-group'
import './lesson.scss'
import ClassOne from "./classOne"
import API from '../../api/api'


// function Lesson(props){
//   const [count,setCount] = useState(0)
//   useEffect(()=>{
//     document.title = `${count}次了`
//   },[count])
//   return (
//     <div>
//       <div>你已经点击了{count}次了</div>
//       <button onClick={()=>setCount(count+1)}>点击我加一</button>
      
//     </div>
//   )
// }
class Lesson extends Component {
  constructor(props){
    super();
    this.state = {
      "a":1,
      isShow:true,
      list:[]
    }
    this.changeShow = this.changeShow.bind(this)
  }
  componentWillMount(){
    console.log(333)
  }
  setA(){
    var val = this.state.a;
    val++;
    this.setState(
      {
        "a":val,
      }
    )
  }
  changeShow(){
    this.setState({
      isShow:!this.state.isShow 
    })
  }
  async testDemo(){
    let demo = await API.postDemoList({aa:11,bb:33});
    let list = demo.data.cartList || [];
    this.setState({
      list:list
    })
    
  }
  componentDidMount(){
    this.testDemo();
  }
  render(){
    return (
      <div>
        <div onClick={this.testDemo.bind(this)}>调mock接口测试</div>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li key="index">
                <div>{item.shopTitle}
                <img src={item.img} className="imgbox"></img></div>
              </li>
            })
          }
        </ul>
        <div>{this.state.a}</div>
        <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
                unmountOnExit
            >
            <div>BOSS级人物-孙悟空</div>
        </CSSTransition>
        <div onClick={this.changeShow}>改变show hide</div>
        <button onClick={this.setA.bind(this,'')}>按钮</button>
        <ClassOne nn={this.state.a} funa={this.setA.bind(this)}></ClassOne>
      </div>
      
    )
  }

}

export default Lesson